<template>
  <div class="nav-btn">
    <div class="menu-left">
      <div
        class="default-btn-list"
        v-for="(item, index) in leftRouteData"
        :key="index"
      >
        <div
          class="bgtext"
          @mouseenter="enterbtn(item.pname)"
          @mouseleave="leavebtn"
          @click="openthis(item.pname, index)"
        >
          {{ item.name }}
        </div>
        <div class="bgimg">
          <img
            v-if="mouseover == item.pname"
            src="../../assets/navHeader/btn1.png"
            alt=""
          />
          <img v-else src="../../assets/navHeader/btn.png" alt="" />
        </div>
      </div>
    </div>
    <div class="menu-center" />
    <div class="menu-right">
      <div
        class="default-btn-list"
        v-for="(item, index) in rightRouteData"
        :key="index"
      >
        <div
          class="bgtext"
          @mouseenter="enterbtn(item.pname)"
          @mouseleave="leavebtn"
          @click="openthis(item.pname)"
        >
          {{ item.name }}
        </div>
        <div class="bgimg">
          <img
            v-if="mouseover == item.pname"
            src="../../assets/navHeader/btn3.png"
            alt=""
          />
          <img v-else src="../../assets/navHeader/btn2.png" alt="" />
        </div>
      </div>

      <div class="default-btn-list">
        <div
          class="bgtext"
          @mouseenter="enterbtn('xtgl')"
          @mouseleave="leavebtn"
        >
          系统管理
        </div>
        <div class="bgimg">
          <img
            v-if="mouseover == 'xtgl'"
            src="../../assets/navHeader/btn3.png"
            alt=""
          />
          <img v-else src="../../assets/navHeader/btn2.png" alt="" />
        </div>
        <div
          class="dispatchSys"
          v-show="dispatchSysShow"
          @mouseenter="enterbtn('xtgl')"
          @mouseleave="leavebtn"
        >
          <div @click="openthis('baseInfoSys')">基础信息</div>
          <div @click="openthis('authSys')">权限管理</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  components: {},
  data() {
    return {
      leftRouteData: [
        {
          path: "/home",
          name: "一张图",
          pname: "yzt",
        },
        {
          path: "/home",
          name: "智能调度",
          pname: "dispatchSys",
        },
        {
          path: "/home",
          name: "售水系统",
          pname: "nbswSys",
        },
      ],
      rightRouteData: [
        {
          path: "/home",
          name: "漏损分析",
          pname: "leakageSys",
        },
        {
          path: "/home",
          name: "安全运维",
          pname: "omSys",
        },
      ],
      rightRouteData2: [
        {
          path: "/home",
          name: "系统管理",
          pname: "xtgl",
        },
        {
          path: "/home",
          name: "基础信息",
          pname: "baseInfoSys",
        },
        {
          path: "/home",
          name: "权限管理",
          pname: "authSys",
        },
      ],
      dispatchSysShow: false,
      list: [],
      mouseover: "",
    };
  },
  created() {
    this.initdada();
  },
  methods: {
    changedispatchSysShow() {
      this.dispatchSysShow = !this.dispatchSysShow;
    },
    enterbtn(data) {
      this.mouseover = data;
      if (this.mouseover == "yzt") {
        this.mouseover = "";
      } else if (this.mouseover == "xtgl") {
        this.dispatchSysShow = true;
      } else {
        this.dispatchSysShow = false;
      }
    },
    leavebtn() {
      this.mouseover = "";
      this.dispatchSysShow = false;
    },
    openthis(data, index) {
      // this.mouseover = data;
      this.dispatchSysShow = false;
      let timefrom = Number(sessionStorage.getItem("curtime"));
      // var timenow = Date.parse(new Date());
      let date = new Date();

      // 精确到毫秒
      let timenow = date.getTime();
      // console.log(timenow);
      // console.log(timenow);
      // console.log(data);
      // console.log(timenow, timefrom);

      if (timenow < timefrom) {
        this.$message.error("权限认证过期，请重新登陆");
        // alert("shi");
        // window.open("http://121.89.216.28:8002/dxny", "_self");
        // window.open("http://121.89.216.28:8002/dxny");
      } else {
        this.list.forEach((element) => {
          if (element.name == data) {
            // console.log(
            //   `http://121.89.216.28:8002/dxny/${element.name}?sysId=${element.sysId}`
            // );
            window.open(
              `http://121.89.216.28:8002/dxny/${element.name}?sysId=${element.sysId}`, "_self"
            );
            // window.open(
            //   // `http://121.89.216.28:8002/dxny/${element.name}?sysId=${element.sysId}`
            // );
          } else {
          }
        });
      }
      this.goout();
      // console.log(data);
      // console.log(this.list);
    },
    initdada() {
      function getUrlParams() {
        let urlStr = window.location.search.substring(1); //截取url 地址？后面所有的内容
        // console.log(urlStr);
        if (!urlStr) {
          if (window.location.href.includes("http://localhost:")) {
            return;
          }
          window.open("http://121.89.216.28:8002/dxny", "_self");
          return;
        }
        let obj = {};
        let paramsArr = urlStr.split("&");
        for (let i = 0, len = paramsArr.length; i < len; i++) {
          let arr = paramsArr[i].split("=");
          obj[arr[0]] = arr[1];
        }
        return obj;
      }
      // console.log(getUrlParams());
      let res = getUrlParams();
      // console.log(res);
      if (!res) {
        return;
      }
      sessionStorage.setItem("curtime", res.curtime);
      // setTimeout(() => {
      //   // window.open("http://121.89.216.28:8002/dxny", "_self");
      //   window.open("http://121.89.216.28:8002/dxny");
      // }, 2 * 60 * 60 * 1000);
      // sessionStorage.setItem("curtime", 1697444690532);
      // sessionStorage.setItem("curtime", 1697452334000);

      sessionStorage.setItem("account", decodeURIComponent(res.account));
      sessionStorage.setItem("sysids", res.sysids);


      // var res1 = {
      //   sysids:
      //     "baseInfoSys-093c765b4b5841fa91d285f3b3a04d56%40omS…c5f6db3%40gisMap-ef39950edcd4405fbb79c0b0e5de0752",
      //   curtime: "1697421904485",
      // };
      let data = res.sysids.split("%40");
      // console.log(data);
      var list = [];
      data.forEach((element) => {
        // console.log(element.split("-"));
        list.push({
          name: element.split("-")[0],
          sysId: element.split("-")[1],
        });
      });
      // console.log(list);
      this.list = list;
      sessionStorage.setItem("list", list);
      this.goout();
    },
    goout() {
      setTimeout(() => {
        // alert("tuichu")
        window.open("http://121.89.216.28:8002/dxny", "_self");
        // window.open("http://121.89.216.28:8002/dxny");
      }, 2 * 60 * 60 * 1000);
    },
  },
};
</script>

<style scoped>
.nav-btn {
  width: 100%;
  position: absolute;
  height: 60px;
  left: 0px;
  display: flex;
  justify-content: space-between;
  background-color: rgba(112, 225, 126, 0);
  z-index: 998;
  background-image: url("@/assets/navHeader/header.png");
  background-size: contain;
    background-repeat: no-repeat;
}

.menu-left {
  width: 504px;
  height: 60px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  margin-left: 120px;
}

.menu-center {
  width: 722px;
  height: 60px;
  background-color: rgba(250, 153, 27, 0);
}

.menu-right {
  width: 504px;
  height: 60px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  margin-right: 102px;
}

.default-btn-list {
  position: relative;
  width: 150px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  font-family: navbiaoti;
  font-weight: lighter;
  margin: 0 18px 0 0px;
 
}
.default-btn-list > .bgtext {
  width: 100%;
  position: absolute;
  font-size: 16px;
  top: 0;
  left: 0;
  text-align: center;
}
.default-btn-list > .bgimg {
  /* width: 100%;
  position: absolute;
  font-size: 16px;
  top: 0;
  left: 0;
  text-align: center; */
  /* height: 10px; */
  margin-top: 11px;
}

.dispatchSys {
  /* width: 122px; */
  /* text-align: center; */
  cursor: pointer;
  position: absolute;
  top: 50px;
  left: 0;
  background: #012f49cc;
  color: #ffffff;
}
.dispatchSys > div {
  width: 122px;
  height: 42px;
  font-size: 16px;
  line-height: 42px;
}
</style>
